new Vue({
    el: "#root",
    data: {
        queryEnv: "/queryEnv",
        changeEnvUrl: "/changeEnv",
        queryKeysUrl: "/keys",
        queryValueUrl: "/get",
        queryTtlUrl: "/ttl",
        setValueUrl: "/set",
        delValueUrl: "/del",
        changeDbUrl: "/changeDB",

        flag: 0,
        env: {
            env: "",
            envList: []
        },

        db: [0, 1],

        keys: "",
        data: [],
        dataKey: [],

        name: "*",
        value: "",

        op:{
            name: "",
            value: ""
        },
        selectName: "",
        date: "",
        ttl: -1
    },
    watch: {
        keys: function () {
            this.reset();
        }
    },
    computed: {},

    beforeMount: function () {
        var _ = this;

        axios.get(_.queryEnv)
            .then(function (response) {
                _.env = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });

        _.loadData();
    },

    methods: {
        queryTTL: function () {
            var _ = this;
            axios.get(_.queryTtlUrl + '?name='+_.selectName)
                .then(function (response) {
                    _.ttl = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        loadData: function () {
            var _ = this;
            axios.get(_.queryKeysUrl + '?key=*')
                .then(function (response) {
                    _.reset();
                    _.data = _.dataKey = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        reset: function () {
            var _ = this;
            _.dataKey = [];
            for (var i = 0; i < _.data.length; i++) {
                var d = _.data[i];
                if (d.indexOf(_.keys) > -1 || "" == _.key) {
                    _.dataKey.push(d);
                }
            }
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-success");
                }
            }
        },
        changeEnv: function (env) {
            var _ = this;
            _.flag = 0;
            _.env.env = env;
            axios.get(_.changeEnvUrl + "?env=" + env)
                .then(function (response) {
                    _.loadData();
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        queryData: function (name) {
            var _ = this;

            _.selectName = name;
            _.ttl = -1;
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-success");
                }
            }
            _.$refs[name][0].classList.add("btn-success");

            axios.get(_.queryValueUrl + "?name=" + name)
                .then(function (response) {
                    _.value = response.data;
                    _.date = new Date().format("yyyy-MM-dd hh:mm:ss");
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getData: function () {
            var _ = this;
            _.queryData(_.op.name)
        },
        setData: function () {
            var _ = this;
            axios.get(_.setValueUrl + "?name=" + _.op.name+"&value="+_.op.value)
                .then(function (response) {

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        delData: function () {
            let b = window.confirm("确定删除?");
            if(b){
                var _ = this;
                axios.get(_.delValueUrl + "?name=" + _.selectName)
                    .then(function (response) {
                        _.selectName = "";

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        },
        changeDB: function (index) {
            var _ = this;

            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-warning");
                }
            }

            _.$refs[index][0].classList.add("btn-warning");

            axios.get(_.changeDbUrl + "?index=" + index)
                .then(function (response) {
                    _.loadData();
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
});


